<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件处理</title>
    <style>
        .box {
            padding: 10px;
            border: 1px solid red;
        }

        .small {
            width: 20px;
            height: 20px;
            background-color: rgb(190, 228, 168);
        }

        .middle {
            width: 60px;
            height: 60px;
            background-color: rgb(133, 204, 245);
        }

        .big {
            width: 100px;
            height: 100px;
            background-color: rgb(182, 133, 245);
        }
    </style>
</head>

<body>
    <div id="app">
        <button @click.once="count++">{{count}}</button>
        <!-- 当不传承的时候默认会把事件对象传进去 -->
        <button @click="handleClick">按钮,不传参，直接调用函数</button>
        <button @click="handleClick1('哈哈')">按钮,传参，直接调用函数</button>
        <button @click="handleClick1('哈哈',$event)">按钮,传参，直接调用函数</button>
        <hr>
        <h2>事件修饰符</h2>
        <a href="http://baidu.com" @click="c1">百度</a>
        <a href="http://baidu.com" @click.prevent="c1">百度</a>
        <form action="http://baidu.com">
            <input type="text">
            <button @click.prevent="c1">按钮</button>
            <input type="submit">
        </form>
        <div class="big box" @click="bigClick">
            <div class="middle box" @click="midClick">
                <div class="small box" @click.once="smClick"></div>
            </div>
        </div>
        <textarea name="" id="" cols="30" rows="10" v-on:keypress.enter="press">

        </textarea>
        <hr>
        <textarea cols="30" rows="10" 
        v-on:keyup.alt.67="clear"
        v-model="text"
        >f'df'da'fda'dsdas
        </textarea>
    </div>
    <!-- <button onclick="alert(123)">按钮</button> -->
    <script src="./js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                count: 0,
                text:'textarea 内容'
            },
            methods: {
                handleClick(e) {
                    // 获取事件对象的两种方式
                    console.log(e)
                    console.log(event)
                    console.log('点击了按钮')
                },
                handleClick1(val, e) {
                    console.log(val)
                    console.log(e)
                    console.log(event)
                },
                c1() {
                    console.log('点击百度')
                },
                bigClick(){
                    alert('click big box')
                },
                midClick(){
                    alert('click middle box')
                },
                smClick(){
                    alert('click small box')
                },
                press(e){
                    console.log(e)
                },
                clear(){
                    console.log('clear is called')
                    this.text = ''
                }
            }
        })
    </script>
</body>

</html>